<template>
  <div class="mapping_add_update">
    <el-popover placement="bottom"
                width="230"
                v-model="popShow"
                v-if="modifyFlag"
                @hide="hidePopover"
                ref="newReportPoper"
                popper-class="manage_accounts_addtemp">
      <el-form :model="dataForm"
               :rules="dataRule"
               :inline="false"
               ref="newReportDataForm"
               @submit.native.prevent
               label-width="80px"
               label-position="top">
        <el-form-item prop="name"
                      :label="$t('custom.reports.name')">
          <el-input :placeholder="$t('custom.mapping.enter')"
                    v-model="dataForm.name">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
                     size="small"
                     v-loading="loading"
                     @click="dataFormSubmitHandle()">{{ $t('custom.attendance.timeEntry.saveBtn') }}</el-button>
        </el-form-item>
      </el-form>
      <span slot="reference"
            v-if="modifyFlag"
            class="accounts_btn edit_btn "
            @click="editAccountGp($event,index)"></span>
    </el-popover>
  </div>
</template>
<script>
// import { isIncludeSymbol } from '@/utils/validate'
export default {
  data () {
    return {
      dataForm: { name: '' },
      popShow: false,
      loading: false,
      flag: true
    }
  },
  props: {
    popData: {
      typeof: Object
    },
    index: Number,
    modifyFlag: {
      typeof: Boolean
    },
    integrationCode: {
      type: String
    }
  },
  created () {
    this.dataForm.name = this.popData.name
  },
  watch: {
    popData: {
      handler (val) {
        this.dataForm.name = this.popData.name
      },
      immediate: true,
      deep: true
    },
    popShow: {
      handler (val) {
        if (!val) {
          this.dataForm.name = ''
        }
      },
      immediate: true,
      deep: true
    }
  },
  computed: {
    dataRule () {
      return {
        name: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur', pattern: '[^ \x22]+' },
          { validator: this.limitNameLength, trigger: 'blur' },
          { validator: this.validatePass, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    dataFormSubmitHandle () {
      this.loading = true
      this.$refs['newReportDataForm'].validate().then((e) => {
        this.updateAccount({
          name: this.dataForm.name,
          type: 1,
          id: this.popData.id,
          integrationCode: this.integrationCode
        })
      }).catch(() => { this.flag = true; this.loading = false })
    },
    limitNameLength (rule, value, callback) {
      if (value.length > 85) callback(new Error('Limit the name within 85 characters'))
      callback()
    },
    editAccountGp (e, index) {
      this.$refs.newReportPoper.doClose()
      // this.$emit('setCurrNodeKey', this.popData.id)
      document.querySelectorAll('.manage_accounts_addtemp').forEach(element => {
        element.style.display = 'none'
      })
      e.stopPropagation()
    },
    updateAccount (params) {
      if (this.flag) {
        this.flag = false
        this.$interface.mapping.addTemplate(params).then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.loading = false
          this.dataForm.name = ''
          this.$emit('refreshEditTempList')
          this.$emit('refreshTempList')
          this.popShow = false
          this.flag = true
        }).catch(() => {
          this.loading = false
          this.flag = true
        })
      }
    },
    hidePopover () {
      this.$refs.newReportDataForm.resetFields()
    },
    validatePass (rule, value, callback) {
      let params = {
        name: value.trim(),
        isNew: false,
        accountId: this.popData.id
      }
      this.$interface.reports.postCheckNameApi(params)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return callback(new Error('The name is already exists'))
          }
          callback()
        })
    }
  }
}
</script>
<style lang="scss">
</style>
